<template>
	<view>
		<!-- 顶部导航栏 -->
		<navBar title="YOLO BLOG" :home="true"></navBar>
		<!-- 搜索框 -->
		<u-search placeholder="瞅啥瞅,揍你啊" v-model.trim="keyword" shape="square" :showAction="false" margin="10px"
			@search="search"></u-search>
		<!-- 选项栏 -->
		<u-tabs :current="current" :list="classifyList" @change="tabsChange" lineColor="#fe630a" lineWidth="50px"
			keyName="classifyName"></u-tabs>
		<!-- 分割线 -->
		<u-divider lineColor="#f3c3a2" :hairline="false"></u-divider>
		<!-- 轮播图 -->
		<swiper class="swiper" :current="current" @change="swiperChange" :cancelable="false"
			:style="'height:' + (swiperHeight+ 5) + 'px'">
			<swiper-item v-for="(item,index) in classifyList" :key="index">
				<view class="swiper-item">
					<!-- 瀑布流 -->
					<!-- renderList[index] index=>分类轮播图的index-->
					<u-waterfall v-model="renderList[index]" class="waterfall" ref="water">
						<template v-slot:left="{leftList}">
							<view class="itemList" v-for="(item, index) in leftList" :key="index" @click="checkDetail(item.blogId)">
								<image @load="imageloaded" :src="item.Blog.cover" mode="widthFix"></image>
								<view>{{item.Blog.title}}</view>
								<view class="down">
									<view class="userImg">
									<image :src="item.Blog.userAvatar"></image>
									</view>
									<text>{{item.Blog.userName}}</text>
								</view>
							</view>
						</template>
						<template v-slot:right="{rightList}">
							<view class="itemList" v-for="(item, index) in rightList" :key="index"  @click="checkDetail(item.blogId)">
								<image @load="imageloaded" :src="item.Blog.cover" mode="widthFix"></image>
								<view>{{item.Blog.title}}</view>
								<view class="down">
									<view class="userImg">
									<image :src="item.Blog.userAvatar"></image>
									</view>
									<text>{{item.Blog.userName}}</text>
								</view>
							</view>
						</template>
					</u-waterfall>
				</view>
			</swiper-item>
		</swiper>
		<!-- 加载 -->
		<view class="wrap">
			<u-loadmore color="#f3c3a2" :status="status" />
		</view>
	</view>
</template>

<script>
	import {
		getClassify,
		getClassifyId
	} from '@/config/api.js'
	// import {mapState} from 'vuex'

	export default {
		data() {
			return {
				keyword: '',
				// 当前选项卡下标
				current: 0,
				// 选项卡分类数据
				classifyList: [],
				// 瀑布流渲染列表
				renderList: [],
				// swiper动态高度
				swiperHeight: 0,
				// loading
				status: 'loadmore',
				limit: 6,
				// 当前分类的文章数量
				count: [],
				//加载防抖
				isloading: false,
				// 存放关键词
				keyword: ''
			}
		},
		onLoad() {
			this.initClassify()
		},
		// “上拉加载”生命周期
		onReachBottom() {
			if (this.isloading) return

			this.isloading = true
			this.status = 'loading';
			setTimeout(async () => {
				this.limit += 6
				await this.initClassifyTxt(this.classifyList[this.current].id, this.limit)
				this.isloading = false
				//const loadMore =await getClassifyId(this.classifyList[this.current].id,this.limit)
				// this.$set(this.renderList,this.current,loadMore.data.rows)
				
				this.status = 'loadmore';
				// 当前文章总数小于当前已加载总数
				if (this.count[this.current] <= this.limit) {
					this.status = 'nomore';
				}
			}, 1000)
		},
		// “下拉刷新”生命周期
		onPullDownRefresh() {
			// console.log(this.$refs);
			// 清空瀑布流内部的数据
			this.$refs.water.map(ele => ele.clear())
			// 清空瀑布流渲染数据
			this.renderList = []

			this.initClassify()

			// 更新页面数据
			setTimeout(function() {
				// ref获取瀑布流组件，清空列表数据
				uni.stopPullDownRefresh()
			}, 1000);
		},
		onShow(){
			// 页面刷新才触发获取瀑布流高度=>给时间请求数据
			setTimeout(() => {
				this.imageloaded()
			}, 1000)
		},
		methods: {			
			// 点击跳转详情页
			checkDetail(ID){
				uni.navigateTo({
					url:'/subpages/detail/detail?id='+ ID
					})
			},
			// 点击选项卡
			tabsChange(e) {
				this.current = e.index
			},
			// 滑动轮播图
			swiperChange(e) {
				this.current = e.detail.current
				// 重新获取不同页面下的轮播图高度
				this.imageloaded()
				// 判断是否已经存在数据（避免重复请求）
				if (this.renderList[this.current]) return
				// 轮播图更改后触发请求对应数据
				this.initClassify()
			},
			// 获取分类数据及Id
			async initClassify() {
				const classify = await getClassify()
				this.classifyList = classify.data.rows
				// 在获取到分类Id后进行获取文章数据
				this.initClassifyTxt(this.classifyList[this.current].id)
			},
			// 通过分类获取文章数据
			async initClassifyTxt(id, limit) {
				const classifyTxt = await getClassifyId(id, limit)
				// 获取当前分类的文章总数
				this.count[this.current] = classifyTxt.data.count
				// Vue2弊端：通过数组下标更换数据无法渲染到页面，vue.set强制视图更新渲染数据
				// this.$set（修改的元素，修改的下标（对象传递属性），修改成什么值）
				// console.log(classifyTxt);
				this.$set(this.renderList, this.current, classifyTxt.data.rows)
				console.log(this.renderList);
			},
			// 图片加载完毕后，获取实时瀑布流高度=>动态计算轮播图高度
			imageloaded() {
				// 获取瀑布流节点高度
				uni.createSelectorQuery().selectAll(".waterfall").boundingClientRect(res => {
					// 如果当前页面没有瀑布流节点，就不动态计算高度return出去
					if(!res[this.current]) return
					this.swiperHeight = +(res[this.current].height)
				}).exec();
			},
			// 搜索功能
			search() {
					if (!this.keyword) {
					return	uni.showToast({
							title: "搜索值不能为空",
							icon: "error"
						})
					}	
				uni.navigateTo({
					url:"/subpages/search/search?keyword="+ this.keyword,
					success: () => {
						//	放在跳转后的成功回调中可以保证外部的keyword传值不为null
						this.keyword = null
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.down{	
		display: flex;
		margin-top: 1vw;
	.userImg{
		height: 5vw;
		width: 5vw;
		background-color: #ffff7f;
		border-radius: 50%;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
			}
		}
		text{
			margin-left:2vw
		}
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.swiper {
		height: 100vh;

		.waterfall {
			padding: 0 10px;

			.itemList {
				width: 95%;
				margin: 0 auto;
				margin-bottom: 12px;
				padding: 10px;
				border: 0.5px solid #d0d0d0;
				border-radius: 8px;
				box-sizing: border-box;
				box-shadow: #d9d3ce 0 3px 8px;
				background-color: #fff;

				image {
					width: 100%;
					border-radius: 8px;
				}
			}
		}
	}

	.wrap {
		padding: 24rpx;
		.item {
			padding: 24rpx 0;
			color: $u-content-color;
			font-size: 28rpx;
		}
	}
</style>
